<template>
	<view>
		<view class="content" @touchstart="hideDrawer">
			<scroll-view class="msg-list" scroll-y="true" :scroll-with-animation="scrollAnimation" :scroll-top="scrollTop" :scroll-into-view="scrollToView" @scrolltoupper="loadHistory" upper-threshold="50">
				<!-- 加载历史数据waitingUI -->
				<view class="loading" v-if="isHistoryLoading">
					<view class="spinner">
						<view class="rect1"></view>
						<view class="rect2"></view>
						<view class="rect3"></view>
						<view class="rect4"></view>
						<view class="rect5"></view>
					</view>
				</view>
				<view class="row" v-for="(row,index) in msgList" :key="index" :id="'msg'+row.id">
					<!-- 用户消息 -->
					<block>
						<!-- 自己发出的消息 -->
						<view class="my" v-if="row.userinfo.uid==myuid&&row.userinfo.user_type==1">
							<!-- 左-消息 -->
							<view class="left">
								<!-- 加载中动图 -->
								<image src="../../static/chat/loading.gif" v-if="showLoadingGif == true&&msgList.indexOf(row)==msgList.length-1"
								 class="sendStatusIcon"></image>
								<!-- 红色感叹号图片,出现的时候点击可以重发信息 -->
								<image src="../../static/chat/exclamatory.png" v-if="showExclamatoryIcon == true&&msgList.indexOf(row)==msgList.length-1"
								 @click="sendMsgAgain(row)" class="sendStatusIcon"></image>
								<!-- 文字消息 -->
								<view v-if="row.type==1" class="bubble">
									<rich-text :nodes="row.content.text"></rich-text>
								</view>
								<!-- 图片消息 -->
								<view v-if="row.type==2" class="bubble img" @tap="showPic(row)">
									<image :src="row.content.url" :style="{'width': row.content.w+'px','height': row.content.h+'px'}"></image>
								</view>
							</view>
							<!-- 右-头像 -->
							<view class="right">
								<image :src="row.userinfo.face"></image>
							</view>
						</view>
						<!-- 客服发出的消息 -->
						<view class="other" v-if="!(row.userinfo.uid==myuid&&row.userinfo.user_type==1)">
							<!-- 左-头像 -->
							<view class="left">
								<image :src="row.userinfo.face"></image>
							</view>
							<!-- 右-用户名称-时间-消息 -->
							<view class="right">
								<view class="username">
									<view class="name">{{row.userinfo.username}}</view> <view class="time" v-if="row.fTime!=null">{{row.fTime}}</view>
								</view>
								<!-- 文字消息 -->
								<view v-if="row.type==1" class="bubble">
									<rich-text :nodes="row.content.text"></rich-text>
								</view>
								<!-- 图片消息 -->
								<view v-if="row.type==2" class="bubble img" @tap="showPic(row)">
									<image :src="row.content.url" :style="{'width': row.content.w+'px','height': row.content.h+'px'}"></image>
								</view>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<!-- 抽屉栏 -->
		<view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- 表情 --> 
			<view class="emoji-box" :class="{hidden:hideEmoji}">
				<swiper class="swiper" indicator-dots="true" duration="150">
					<swiper-item v-for="(page,pid) in emojiLists" :key="pid">
						<view style="display: flex;" @click="addEm(item.url)" v-for="(item,index) in page" :key="index">{{item.url}}</view>
						<view>
							<image src="../../static/chat/deleteee.png" mode="widthFix" style="width: 64upx;height: 64upx;margin-top: 10upx;"
							 @click="deleteEmoji"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 更多功能 相册-拍照 -->
			<view class="more-layer" :class="{hidden:hideMore}">
				<view class="list">
					<view class="box" @tap="chooseImage"><view class="icon tupian2"></view></view>
					<view class="box" @tap="camera"><view class="icon paizhao"></view></view>
				</view>
			</view>
		</view>
		<!-- 底部输入栏 -->
		<view class="input-box" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- #ifdef H5 -->
			<view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view>
			<!-- #endif -->
			<view class="textbox">
				<view class="text-mode"  :class="isVoice?'hidden':''">
					<view class="box">
						<textarea auto-height="true" v-model="textMsg" @focus="textareaFocus" :show-confirm-bar="false" :cursor-spacing="10"/>
					</view>
					<view class="em" @tap="chooseEmoji">
						<view class="icon biaoqing"></view>
					</view>
				</view>
			</view>
			<!-- #ifndef H5 -->
			<view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view>
			<!-- #endif -->
			<view class="send" :class="isVoice?'hidden':''" @tap="sendText">
				<view class="btn">发送</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {formatLuckyTime} from '@/common/util.js'
	import {
		uploadFile
	} from '@/common/alioss.js'
	if(!mqtt){
		var mqtt=require("mqtt/mqtt.js")
	}
	var chat_client = null;
	export default {
		data() {
			return {
				//文字消息
				textMsg:'',
				//消息列表
				isHistoryLoading:false,
				scrollAnimation:false,
				scrollTop:0,
				scrollToView:'',
				msgList:[],
				msgImgList:[],
				myuid:this.$store.getters.getUserId,
				isVoice:false,
				// 抽屉参数
				popupLayerClass:'',
				// more参数
				hideMore:true,
				//表情定义
				hideEmoji:true,
				emojiLists: [],
				token: this.$store.getters.getToken,
				chat_id: 0,
				showLoadingGif: false,
				showExclamatoryIcon: false,
				last_page: 1,
				page: 1,
				isChooseImg: false,
				nickName: '',
				avatarUrl: '',
				mqttData: {}
			};
		},
		onLoad(option) {
			this.getMsgList()
			setTimeout(()=>{
				this.getServiceAutoMsg()
			},1000)
			try {
				const res = uni.getStorageSync('userInfo');
				if (res) {
					this.nickName = res.nickName
					this.avatarUrl = res.avatarUrl
				}
			} catch (e) {
				this.nickName = this.$store.state.nickName
				this.avatarUrl = this.$store.state.avatarUrl
			}
			let emojiListss = [{
					url: String.fromCodePoint('0x1F601')
				},
				{
					url: String.fromCodePoint('0x1F602')
				},
				{
					url: String.fromCodePoint('0x1F603')
				},
				{
					url: String.fromCodePoint('0x1F604')
				},
				{
					url: String.fromCodePoint('0x1F605')
				},
				{
					url: String.fromCodePoint('0x1F606')
				},
				{
					url: String.fromCodePoint('0x1F609')
				},
				{
					url: String.fromCodePoint('0x1F60A')
				},
				{
					url: String.fromCodePoint('0x1F60B')
				},
				{
					url: String.fromCodePoint('0x1F60C')
				},
				{
					url: String.fromCodePoint('0x1F60D')
				},
				{
					url: String.fromCodePoint('0x1F60E')
				},
				{
					url: String.fromCodePoint('0x1F642')
				},
				{
					url: String.fromCodePoint('0x1F643')
				},
				{
					url: String.fromCodePoint('0x1F60F')
				},
				{
					url: String.fromCodePoint('0x1F612')
				},
				{
					url: String.fromCodePoint('0x1F613')
				},
				{
					url: String.fromCodePoint('0x1F614')
				},
				{
					url: String.fromCodePoint('0x1F616')
				},
				{
					url: String.fromCodePoint('0x1F618')
				},
				{
					url: String.fromCodePoint('0x1F61A')
				},
				{
					url: String.fromCodePoint('0x1F61C')
				},
				{
					url: String.fromCodePoint('0x1F61D')
				},
				{
					url: String.fromCodePoint('0x1F61E')
				},
				{
					url: String.fromCodePoint('0x1F620')
				},
				{
					url: String.fromCodePoint('0x1F621')
				},
				{
					url: String.fromCodePoint('0x1F622')
				},
				{
					url: String.fromCodePoint('0x1F623')
				},
				{
					url: String.fromCodePoint('0x1F624')
				},
				{
					url: String.fromCodePoint('0x1F911')
				},
				{
					url: String.fromCodePoint('0x1F917')
				},
				{
					url: String.fromCodePoint('0x1F92D')
				},
				{
					url: String.fromCodePoint('0x1F92B')
				},
				{
					url: String.fromCodePoint('0x1F914')
				},
				{
					url: String.fromCodePoint('0x1F625')
				},
				{
					url: String.fromCodePoint('0x1F628')
				},
				{
					url: String.fromCodePoint('0x1F629')
				},
				{
					url: String.fromCodePoint('0x1F62A')
				},
				{
					url: String.fromCodePoint('0x1F62D')
				},
				{
					url: String.fromCodePoint('0x1F630')
				},
				{
					url: String.fromCodePoint('0x1F631')
				},
				{
					url: String.fromCodePoint('0x1F632')
				},
				{
					url: String.fromCodePoint('0x1F633')
				},
				{
					url: String.fromCodePoint('0x1F635')
				},
				{
					url: String.fromCodePoint('0x1F637')
				},
				{
					url: String.fromCodePoint('0x1F638')
				},
				{
					url: String.fromCodePoint('0x1F639')
				},
				{
					url: String.fromCodePoint('0x1F63A')
				},
				{
					url: String.fromCodePoint('0x1F63B')
				},
				{
					url: String.fromCodePoint('0x1F63C')
				},
				{
					url: String.fromCodePoint('0x1F63D')
				},
				{
					url: String.fromCodePoint('0x1F63E')
				},
				{
					url: String.fromCodePoint('0x1F63F')
				},
				{
					url: String.fromCodePoint('0x1F640')
				},
				{
					url: String.fromCodePoint('0x1F645')
				},
				{
					url: String.fromCodePoint('0x1F646')
				},
				{
					url: String.fromCodePoint('0x1F647')
				},
				{
					url: String.fromCodePoint('0x1F648')
				},
				{
					url: String.fromCodePoint('0x1F649')
				},
				{
					url: String.fromCodePoint('0x1F64A')
				},
				{
					url: String.fromCodePoint('0x1F64B')
				},
				{
					url: String.fromCodePoint('0x1F64C')
				},
				{
					url: String.fromCodePoint('0x1F64D')
				},
				{
					url: String.fromCodePoint('0x1F64E')
				},
				{
					url: String.fromCodePoint('0x1F64F')
				},
				{
					url: String.fromCodePoint('0x1F44C')
				},
				{
					url: String.fromCodePoint('0x1F44D')
				},
				{
					url: String.fromCodePoint('0x1F44E')
				},
				{
					url: String.fromCodePoint('0x1F91D')
				},
			];
			//将表情数组分为多个
			this.emojiLists = this.group(emojiListss, 23)
		},
		onShow(){
			if (!this.isChooseImg) {
				this.getMqttData()
			}
			this.scrollTop = 9999999;
			setTimeout(() => {
				this.isChooseImg = false
			},1000)
		},
		onUnload() {
			// 离开该页面时，触发
			if (chat_client != null) {
				chat_client.end()
				chat_client = null
			}
		},
		onHide() {
			// 当处于聊天页面时，手机突然息屏时触发，关闭此次连接
			if (chat_client != null && !this.isChooseImg) {
				chat_client.end()
				chat_client = null
			}
		},
		methods:{
			getServiceAutoMsg() {
				let data={
					token: this.token,
					isNoNeedLoading: true
				}
				this.$api.getAutoMsg(data).then(res=>{
					if(res.status) {
						// 文字信息
						let autoText = {
							content: {
								text: '<div style="display: flex;align-items: center;">'+res.data.content+'</div>'
							},
							type: 1,
							id: new Date().getTime(),
							time: new Date().getTime()/1000,
							userinfo: {
								face: res.user_info.avatar,
								uid: 1,
								user_type: 2,
								username: res.user_info.nickname
							}
						}
						let autoQRCode={
							content: {
								url: res.data.qr_code,
								w: 175,
								h: 175
							},
							type: 2,
							id: new Date().getTime()+3,
							time: new Date().getTime()/1000,
							userinfo: {
								face: res.user_info.avatar,
								uid: 1,
								user_type: 2,
								username: res.user_info.nickname
							}
						}
						this.msgImgList.push(autoQRCode.content.url);
						autoText.fTime = formatLuckyTime(new Date().getTime()/1000);
						this.msgList.push(autoText)
						this.msgList.push(autoQRCode)
						this.$nextTick(function() {
							// 滚动到底
							this.scrollToView = 'msg'+autoQRCode.id
						});
						uni.vibrateLong();
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					console.log('获取自动回复消息',res)
				}).catch(err=>{
					console.log('获取自动回复消息',err)
				})
			},
			// 获取mqtt配置信息
			getMqttData() {
				this.$api.getChatInfo({token: this.$store.getters.getToken}).then(res => {
					if(res.status) {
						this.$store.commit('updataMqttData',res.mqtt)
						uni.setStorageSync("user_type",res.data.user_type)
						uni.setStorageSync("chat_id",res.data.chat_id)
						this.chat_id = res.data.chat_id
						this.mqttData = res.mqtt
						// 开始mqtt连接
						this.startChat(this.mqttData)
					}
					console.log('获取mqtt配置信息',res)
				}).catch(err => {
					console.log('获取mqtt配置信息',err)
				})
			},
			// mqtt订阅
			startChat(mqttData) {
				let self = this;
				if (chat_client == null) {
					uni.setNavigationBarTitle({
						title: '连接中...'
					});
					chat_client = mqtt.connect("wxs://"+mqttData.hostname, {
						clientId: 'dlxqwx' + new Date().getTime(),
						username: mqttData.username,
						password: mqttData.password
					})
					chat_client.on('connect', function() {
						console.log('on connect', chat_client)
						chat_client.subscribe(mqttData.topic, function(err) {
							if (!err) {
								//设置标题,标题为与客服聊天的客户名字
								uni.setNavigationBarTitle({
									title: '客服聊天'
								});
								console.log('订阅成功')
							} else {
								console.log('订阅失败原因', err)
							}
						});
					}).on('error', function() {
						console.log('mqtt on error')
					}).on('end', function() {
						console.log('mqtt on end')
					}).on('message', function(topic, message) {
						var msg = JSON.parse(message.toString());
						console.log('chat.vue窗口订阅到的信息有', msg);
						if (!(msg.userinfo.uid == self.myuid && msg.userinfo.user_type == 1)) { //收到客服发的消息
							// chat_client.publish('read_msg', msg.id.toString())
							self.screenMsg(msg);
						}
					})
				}
				if (chat_client != null && chat_client.connected == false && chat_client.disconnecting) {
					chat_client.on('reconnect', function() {
						console.log('reconnect reconnect reconnect', chat_client)
					})
				}
			},
			// 选择表情
			chooseEmoji(){
				this.hideMore = true;
				if(this.hideEmoji){
					this.hideEmoji = false;
					this.openDrawer();
				}else{
					this.hideDrawer();
				}
			},
			//添加表情
			addEm(url) {
				this.textMsg += url
			},
			//删除输入框最后一个字符
			deleteEmoji() {
				if (this.textMsg) {
					let number = this.textMsg.substr(this.textMsg.length - 2, this.textMsg.length).search(
						/(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f])|(\ud83d[\ude80-\udeff])/i) == -1 ? 1 : 2;
					this.textMsg = this.textMsg.substr(0, this.textMsg.length - number);
				}
			},
			group(array, subGroupLength) {
				let index = 0;
				let newArray = [];
				while (index < array.length) {
					newArray.push(array.slice(index, index += subGroupLength));
				}
				return newArray;
			},
			// 接受消息(筛选处理)
			screenMsg(msg){
				//从长连接处转发给这个方法，进行筛选处理
				if(!(msg.userinfo.uid == this.myuid && msg.userinfo.user_type == 1)) {//收到客服发的消息
					msg.content = JSON.parse(msg.content)
				}
				// 用户消息
				switch (msg.type){
					case 1:
						this.addTextMsg(msg);
						break;
					case 2:
						this.addImgMsg(msg);
						break;
				}
				//非自己的消息震动
				if(msg.userinfo.uid!=this.myuid&&msg.userinfo.user_type!=1){
					console.log('振动');
					uni.vibrateLong();
				}
				this.$nextTick(function() {
					// 滚动到底
					this.scrollToView = 'msg'+msg.id
				});
			},
			//触发滑动到顶部(加载历史信息记录)
			loadHistory(e){
				this.page=this.page+1
				if(this.page>this.last_page){
					uni.showToast({
						title: '没有更多了',
						icon: 'none',
						duration: 2000
					})
					this.isHistoryLoading = false;
				}else {
					this.isHistoryLoading = true;//参数作为进入请求标识，防止重复请求
					this.scrollAnimation = false;//关闭滑动动画
					let Viewid = this.msgList[0].id;//记住第一个信息ID
					this.$api.getChatMessageList({token: this.token,page:this.page}).then(res => {
						if(res.status) {
							var temp_time = 0
							let list = res.data.data
							this.last_page = res.data.last_page
							// 获取消息中的图片,并处理显示尺寸
							for(let i=0;i<list.length;i++){
								if (list[i].time - temp_time > 300) {
									temp_time = list[i].time;
									list[i].fTime = formatLuckyTime(list[i].time);
								} else {
									list[i].fTime = null;
								}
								list[i].content = JSON.parse(list[i].content)
								if(list[i].type==2){
									list[i].content = this.setPicSize(list[i].content);
									this.msgImgList.push(list[i].content.url);
								}
							}
							this.msgList = list.reverse().concat(this.msgList);
							//这段代码很重要，不然每次加载历史数据都会跳到顶部
							this.$nextTick(function() {
								this.scrollToView = 'msg'+Viewid;//跳转上次的第一行信息位置
								this.$nextTick(function() {
									this.scrollAnimation = true;//恢复滚动动画
								});
							});
							this.isHistoryLoading = false;
						}
						console.log('获取聊天记录',res)
					}).catch(err => {
						console.log('获取聊天记录',err)
					})
				}
			},
			// 加载第一页聊天消息记录
			getMsgList(){
				this.$api.getChatMessageList({token: this.token,page:1}).then(res => {
					if(res.status) {
						var temp_time = 0
						let list = res.data.data
						this.last_page = res.data.last_page
						// 获取消息中的图片,并处理显示尺寸
						for(let i=0;i<list.length;i++){
							if (list[i].time - temp_time > 300) {
								temp_time = list[i].time;
								list[i].fTime = formatLuckyTime(list[i].time);
							} else {
								list[i].fTime = null;
							}
							list[i].content = JSON.parse(list[i].content)
							if(list[i].type==2){
								list[i].content = this.setPicSize(list[i].content);
								this.msgImgList.push(list[i].content.url);
							}
						}
						this.msgList = list.reverse();
					}
					console.log('获取聊天记录',res)
				}).catch(err => {
					console.log('获取聊天记录',err)
				})
			},
			//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
			setPicSize(content){
				// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
				let maxW = uni.upx2px(350);//350是定义消息图片最大宽度
				let maxH = uni.upx2px(350);//350是定义消息图片最大高度
				if(content.w>maxW||content.h>maxH){
					let scale = content.w/content.h;
					content.w = scale>1?maxW:maxH*scale;
					content.h = scale>1?maxW/scale:maxH;
				}
				return content;
			},
			
			//更多功能(点击+弹出) 
			showMore(){
				this.isVoice = false;
				this.hideEmoji = true;
				if(this.hideMore){
					this.hideMore = false;
					this.openDrawer();
				}else{
					this.hideDrawer();
				}
			},
			// 打开抽屉
			openDrawer(){
				this.popupLayerClass = 'showLayer';
			},
			// 隐藏抽屉
			hideDrawer(){
				this.popupLayerClass = '';
				setTimeout(()=>{
					this.hideMore = true;
					this.hideEmoji = true;
				},150);
			},
			// 选择图片发送
			chooseImage(){
				this.getImage('album');
			},
			//拍照发送
			camera(){
				this.getImage('camera');
			},
			//选照片 or 拍照
			getImage(type){
				this.isChooseImg = true
				this.hideDrawer();
				uni.chooseImage({
					sourceType:[type],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res)=>{
						for(let i=0;i<res.tempFilePaths.length;i++){
							uni.getImageInfo({
								src: res.tempFilePaths[i],
								success: (image)=>{
									uni.showLoading({
										title: '图片上传中...'
									})
									let msg
									uploadFile(res.tempFilePaths[i]).then(res => {
										let that = this
										let imgUrl = new Array();
										imgUrl.push(res.data.url)
										for (let j = 0; j < imgUrl.length; j++) {
											//发送图片
											msg = {
												url: imgUrl[j],
												w: image.width,
												h: image.height,
											};
											that.sendMsg(msg, 2); // 图片为2
										}
										uni.hideLoading()
									})
									// console.log(image.width);
									// console.log(image.height);
									// let msg = {url:res.tempFilePaths[i],w:image.width,h:image.height};
									// this.sendMsg(msg,2);
								}
							});
						}
					}
				});
			},
			//获取焦点，如果不是选表情ing,则关闭抽屉
			textareaFocus(){
				if(this.popupLayerClass=='showLayer' && this.hideMore == false){
					this.hideDrawer();
				}
			},
			isNull(str) {
				str = JSON.parse(JSON.stringify(str).replace(/\\n/g, '')).toString()
				if (str == '') return true
				var regu = '^[ ]+$'
				var re = new RegExp(regu)
				return re.test(str)
			},
			// 发送文字消息
			sendText(){
				let isSpace = this.isNull(this.textMsg)
				if (isSpace) {
					uni.showToast({
						title: '输入的内容不能为空！',
						icon: 'none',
						duration: 2000
					})
					this.textMsg = ''
					return false;
				}
				this.hideDrawer();//隐藏抽屉
				if(!this.textMsg){
					return;
				}
				let content = this.replaceEmoji(this.textMsg);
				console.log('hhhhhh',content)
				let msg = {text:content}
				this.sendMsg(msg,1);//文本消息
				this.textMsg = '';//清空输入框
			},
			//转化html
			replaceEmoji(str) {
				return `<div style="display: flex;align-items: center;">${str}</div>`;
			},
			
			// 发送消息
			sendMsg(content,type){
				//实际应用中，此处应该提交长连接，模板仅做本地处理。
				var nowDate = new Date();
				let lastid
				if(this.msgList.length>0) {
					lastid = this.msgList[this.msgList.length-1].id;
					lastid++;
				}
				else {
					lastid = 1
				}
				let msg = {id:lastid,time:nowDate.getHours()+":"+nowDate.getMinutes(),type:type,userinfo:{uid:this.myuid,username:this.nickName,face:this.avatarUrl,user_type:1},content:content}
				// 发送消息
				this.screenMsg(msg);
				this.showLoadingGif = true;
				let data = {
					token: this.token,
					chat_id: this.chat_id,
					receiver_type: 2,
					topic: this.$store.getters.getMqttData.topic,
					content: JSON.stringify(content),
					type: type,
					isNoNeedLoading: true
				}
				this.$api.sendContent(data).then(res => {
					if(res.status) {
						this.showExclamatoryIcon = false; //不显示感叹号
						this.showLoadingGif = false; //不显示加载中动图
					}else {
						this.showExclamatoryIcon = true; //显示感叹号
						this.showLoadingGif = false; //不显示加载中动图
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(err => {
					console.log('发送消息接口',err)
				})
			},
			// 再发一遍
			sendMsgAgain(msg) {
				console.log('再发一遍111111111',msg)
				this.showLoadingGif = true;
				this.showExclamatoryIcon = false; //不显示感叹号
				let data = {
					token: this.token,
					chat_id: this.chat_id,
					receiver_type: 2,
					topic: this.$store.getters.getMqttData.topic,
					content: JSON.stringify(msg.content),
					type: msg.type,
					isNoNeedLoading: true
				}
				this.$api.sendContent(data).then(res => {
					if (res.status) { //发送消息成功
						this.showExclamatoryIcon = false; //不显示感叹号
						this.showLoadingGif = false; //不显示加载中动图
					} else { //发送失败
						this.showExclamatoryIcon = true; //显示感叹号
						this.showLoadingGif = false; //不显示加载中动图
					}
				}).catch(err => {
					console.log('sendContent接口错误报错信息', err)
				})
			},
			// 添加文字消息到列表
			addTextMsg(msg){
				this.msgList.push(msg);
			},
			// 添加图片消息到列表
			addImgMsg(msg){
				msg.content = this.setPicSize(msg.content);
				this.msgImgList.push(msg.content.url);
				this.msgList.push(msg);
			},
			// 预览图片
			showPic(msg){
				this.isChooseImg = true;
				uni.previewImage({
					indicator:"none",
					current:msg.content.url,
					urls: this.msgImgList
				});
			},
			discard(){
				return;
			}
		}
	}
</script>
<style lang="scss">
	@import "@/static/chat/chat.scss"; 
	.sendStatusIcon {
		width: 45upx;
		height: 45upx;
		margin-right: 20upx;
	}
</style>